<template>
  <div>
    <h1>分类列表</h1>
    <!-- 表格的填写 -->
    <!-- ：data是关联到script里面data()数据 item是定义的数据名 -->
    <el-table :data="item">
      <!-- prop数据名下的数据名类似于：data:[{name:xxx,_id:xxx}] -->
      <el-table-column prop="_id" label="ID" width="230"> </el-table-column>
      <!-- 增加一个上级分类  这里上级分类外面要获取的不是一个id值而且id值所对应的名字 就要在获取数据接口中多加一个函数populate() 操作在sever端-->
      <el-table-column prop="parent.name" label="上级分类" width="230"> </el-table-column>
      <el-table-column prop="name" label="分类名称"> </el-table-column>
      <!-- 要实现分类操作：修改和删除，去elementui官网里面找table操作 -->
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <!-- 点击编辑按钮要实现的是页面的跳转，由于只有一行代码所以直接写在html中 -->
          <!-- 跳转在哪呢？跳转到一个自动生成的模板页面，由当前页面的_id自动生成的 -->
          <!-- scope.row表示所在的行/scope.row._id表示当前行的_id值 -->
          <!-- 注意这个$router.push()中地址的问题：前缀加/ ：表示从根目录 / 开始  ||前缀不加 /：表示从当前目录开始：即CategoriesList/categories/... -->
          <!-- 如何设置路由跳转呢？把${scope.row._id}当作params参数然后进行路由接收 -->
          <el-button
            @click="$router.push(`/categories/edit/${scope.row._id}`)"
            size="small"
            >编辑</el-button
          >
          <!-- 删除按钮，携带的参数为当前行的id值 -->
          <!-- 在删除按钮这里加多个提示按钮，防止误删 删除的代码实现在method里面 -->
          <el-button @click="remove(scope.row)" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "CategoriesList",

  data() {
    return {
      item: [],
    };
  },
  methods: {
    async fetch() {
      //get接口调用
      const res = await this.$http1.get("rest/categories");
      //得到的数据是一个json格式的数据，直接赋值给item即可  注意赋值是res.data
      this.item = res.data;
    },
    async remove(row) {
      this.$confirm(`此操作将永久删除分类 ${row.name}, 是否继续?`, "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await this.$http1.delete(`rest/categories/${row._id}`);
          this.$message({
            //then是已经选择删除后出现的，所以删除接口写在这里

            type: "success",
            message: "删除成功!",
          });
          //删除成功后刷新页面
          this.fetch();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  //定义生命周期函数，创建时
  //作用：获取name和_id到item里面 以防万一以后还要调用，再把获取函数定义到method里面
  created() {
    //执行fetch()函数
    this.fetch();
  },
};
</script>

<style>
</style>